<template>
	<view class="container">
		<Tabbar cureentPage='my'></Tabbar>

		<view class="container-head" @click="jumt('/pages/login/login')">
			<view class="container-head-img">
				<image src="../../static/avther.png" mode="aspectFill"></image>
			</view>
			<view class="container-head-title">
				<view class="container-head-title-h1">{{userInfo.nickname ? userInfo.nickname : '未登录'}}</view>
				<view class="container-head-title-h2">手机号码：{{userInfo.mobile ? userInfo.mobile : '-'}}</view>
			</view>
		</view>

		<view class="container-frequency">
			<view class="container-frequency-icon">
				<image src="../../static/vip.png" mode="aspectFill"></image>
			</view>
			<view class="container-frequency-text">
				会员剩余{{ userInfo.number_times || 0}}次数
			</view>
			<view class="container-frequency-btn" @click="jumt('/pages/member/member')">
				充值
			</view>
		</view>

	<!-- 	<view class="container-card">
			<view class="container-card-content">
				<view class="container-card-content-head">
					<view class="container-card-content-head-textStyle">我的订单</view>
					<view>商品收藏 <text class="container-card-content-head-textStyle">9</text> </view>
					<view>我的足迹 <text class="container-card-content-head-textStyle">9</text> </view>
				</view>
				<view class="container-card-content-box">
					<view class="container-card-content-box-item" v-for="(item,index) in orderList" :key="index"
						@click="jumt(item.path)">
						<view class="container-card-content-box-item-icon">
							<image :src="item.icon" mode="widthFix"></image>
						</view>
						<view class="container-card-content-box-item-text">
							{{ item.name }}
						</view>
					</view>
				</view>
			</view>
		</view> -->

		<view class="container-card">
			<view class="container-card-content">
				<view class="container-card-content-title">
					设备管理
				</view>
				<view class="container-card-content-box">
					<view class="container-card-content-box-item" v-for="(item,index) in equity" :key="index"
						@click="jumt(item.path)">
						<view class="container-card-content-box-item-icon">
							<image :src="item.icon" mode="aspectFill"></image>
						</view>
						<view class="container-card-content-box-item-text">
							{{ item.name }}
						</view>
					</view>
				</view>
			</view>
		</view>

		<view class="container-card" style="margin-top: 24rpx;">
			<view class="container-card-content">
				<view class="container-card-content-title" @click="show = true">
					团队管理
				</view>
				<view class="container-card-content-box">
					<view class="container-card-content-box-item" v-for="(item,index) in allMoreData" :key="index"
						@click="jumt(item.path)">
						<view class="container-card-content-box-item-icon">
							<image :src="item.icon" mode="aspectFill"></image>
						</view>
						<view class="container-card-content-box-item-text">
							{{ item.name }}
						</view>
					</view>
				</view>
			</view>
		</view>

		<!-- 	<view class="container-more">
			<view class="container-more-title">
				常用功能
			</view>
			<view class="container-more-box">
				<view style="padding:24rpx; display: flex; flex-wrap: wrap;">
					<view class="container-more-box-item" v-for="(item, index) of allMoreData" :key="index"
						@click="jumt(item.path)">
						<view class="container-more-box-item-icon">
							<image :src="item.icon" mode="aspectFill"></image>
						</view>
						<view class="container-more-box-item-text">
							{{ item.name }}
						</view>
					</view>
				</view>
			</view>
		</view> -->
	</view>
</template>

<script>
	import Tabbar from '@/components/common/Tabbar.vue'
	export default {
		data() {
			return {
				userInfo: {},
				orderList: [{
						name: '待付款',
						path: '/pagesA/order/index',
						icon: 'https://kangxi.banbanxiaxia.cn/upload/1/common/images/20240624/20240624032730171921405070427.png'
					},
					{
						name: '待发货',
						path: '',
						icon: 'https://kangxi.banbanxiaxia.cn/upload/1/common/images/20240624/20240624032730171921405070513.png'
					},
					{
						name: '待收货',
						path: '',
						icon: 'https://kangxi.banbanxiaxia.cn/upload/1/common/images/20240624/20240624032730171921405072884.png'
					},
					{
						name: '待评价',
						path: '',
						icon: 'https://kangxi.banbanxiaxia.cn/upload/1/common/images/20240624/20240624032730171921405071211.png'
					}
				],
				equity: [
				{
					name: '开机记录',
					path: '/pages/my/start-power',
					icon: 'https://kangxi.banbanxiaxia.cn/upload/1/common/images/20240612/20240612051932171818397212016.png'
				},
				{
						name: '充值记录',
						path: '/pages/my/draw-cash',
						icon: 'https://kangxi.banbanxiaxia.cn/upload/1/common/images/20240612/20240612051932171818397212446.png'
				},
				{
					name: '在线客服',
					path: '',
					icon: 'https://kangxi.banbanxiaxia.cn/upload/1/common/images/20240612/20240612051932171818397214812.png'
				},
				{
					name: '问题反馈',
					path: '',
					icon: 'https://kangxi.banbanxiaxia.cn/upload/1/common/images/20240612/20240612051932171818397221887.png'
				},
				// /pagesA/feedback/index
				],
				allMoreData: [],
				moreList: [
					{
						name: '门店管理',
						path: '/pagesA/store/list',
						icon: 'https://kangxi.banbanxiaxia.cn/upload/1/common/images/20240701/20240701025933171981717380266.png'
					},
					{
						name: '故障管理',
						path: '/pages/faultManger/index',
						icon: 'https://kangxi.banbanxiaxia.cn/upload/1/common/images/20240618/20240618052805171870288593648.png'
					},
				{
					name: '银行卡管理',
					path: '/pages/addBank/index?state=2',
					icon: 'https://kangxi.banbanxiaxia.cn/upload/1/common/images/20240612/20240612051932171818397219469.png'
				},
					{
						name: '我的团队',
						path: 'term',
						icon: 'https://kangxi.banbanxiaxia.cn/upload/1/common/images/20240612/20240612051932171818397217541.png'
					},
					{
						name: '收益明细',
						path: '/pages/my/income',
						icon: 'https://kangxi.banbanxiaxia.cn/upload/1/common/images/20240624/20240624033042171921424282843.png'
					}
				]
			}
		},
		components: {
			Tabbar
		},
		onShow() {
			this.allMoreData = []
			// this.token = uni.getStorageSync('token');
			this.getuserInfo()
			for (let i = 0; i < this.moreList.length; i++) {
				if (this.moreList[i].name === '我的团队') {
					if (this.userInfo.group_id && this.userInfo.group_id !== 99) {
						this.allMoreData.push(this.moreList[i])
					} else {
						continue
					}
				} else {
					this.allMoreData.push(this.moreList[i])
				}
			}
		},
		methods: {
			getuserInfo() {
				let temp = uni.getStorageSync('userInfo')
				this.userInfo = temp && JSON.parse(temp) || ''
			},
			jumt(path) {
				if (path === '') {
					uni.$u.toast('开发中 尽请期待...')
					return
				}
				if (path === 'term') {
					if (this.userInfo.group_id === 4) {
						uni.navigateTo({
							url: `/pages/team/deviceList?salesManager=${this.userInfo.mobile}`
						})
					} else {
						uni.navigateTo({
							url: '/pages/team/index'
						})
					}

				} else {
					uni.navigateTo({
						url: path
					})
				}
			}
		}
	}
</script>

<style lang="scss" scoped>
	.container {
		background: #f3f3f3;
		height: 100vh;

		&-head {
			display: flex;
			align-items: center;
			padding: 38rpx 28rpx 10rpx 28rpx;

			&-img {
				width: 108rpx;
				height: 108rpx;

				image {
					width: 100%;
					height: 100%;
					object-fit: cover;
				}
			}

			&-title {
				margin-left: 24rpx;

				&-h1 {
					font-weight: 700;
					font-size: 28rpx;
					color: #3D3D3D;
				}

				&-h2 {
					font-size: 24rpx;
					color: #6D6D6D;
					line-height: 1.5;
				}
			}
		}

		&-frequency {
			width: 690rpx;
			height: 66rpx;
			background: linear-gradient(90deg, #FF8732 0%, #FFB65E 100%);
			border-radius: 50rpx;
			margin: 20rpx auto;
			display: flex;
			align-items: center;

			&-icon {
				width: 60rpx;
				height: 58rpx;
				margin-left: 24rpx;

				image {
					width: 100%;
					height: 100%;
					object-fit: cover;
				}
			}

			&-text {
				margin-left: 12rpx;
				font-weight: 500;
				font-size: 24rpx;
				color: #FFFFFF;
			}

			&-btn {
				margin-left: 300rpx;
				text-align: center;
				line-height: 40rpx;
				width: 88rpx;
				height: 40rpx;
				background-color: #fff;
				color: #FF8732;
				font-size: 24rpx;
				border-radius: 20rpx;
			}
		}

		&-card {
			display: flex;
			align-items: center;
			justify-content: center;
			flex-direction: column;
			margin-bottom: 20rpx;

			&-content {
				width: 690rpx;
				background-color: #fff;
				border-radius: 20rpx;

				&-head {
					display: flex;
					// justify-content: space-around;
					align-items: center;
					background: #EAEAEA;
					border-radius: 20rpx 20rpx 0 0;
					padding: 16rpx;
					font-size: 24rpx;
					color: #3D3D3D;

					&-textStyle {
						font-weight: 700;
						font-size: 28rpx;
						margin-left: 10rpx;
					}
				}

				&-title {
					font-weight: 700;
					font-size: 28rpx;
					color: #3D3D3D;
					padding: 18rpx 24rpx;
				}

				&-box {
					display: flex;
					padding: 0 30rpx;
					flex-wrap: wrap;

					&-item {
						display: flex;
						align-items: center;
						justify-content: center;
						flex-direction: column;
						margin: 20rpx 20rpx;
						min-width: 110rpx;

						&-icon {
							width: 68rpx;
							height: 60rpx;

							image {
								width: 100%;
								height: 100%;
								object-fit: cover;
							}
						}

						&-text {
							font-size: 24rpx;
							color: #3D3D3D;
							line-height: 2;
						}
					}
				}
			}
		}

		&-more {
			&-title {
				padding: 28rpx;
				font-weight: 700;
				font-size: 36rpx;
				color: #3D3D3D;
			}

			&-box {
				width: 686rpx;
				background: #FFFFFF;
				border-radius: 20rpx;
				margin: 0 auto;

				// display: flex;
				&-item {
					display: flex;
					align-items: center;
					flex-direction: column;
					margin: 12rpx 30rpx;

					&-icon {
						width: 76rpx;
						height: 68rpx;
						flex-shrink: 0;

						image {
							width: 100%;
							height: 100%;
							object-fit: cover;
						}
					}

					&-text {
						font-size: 24rpx;
						color: #3D3D3D;
						line-height: 2;
					}
				}
			}
		}
	}
</style>